<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="80%"
             @open="handleDialogOpen()" v-loading="loading">
    <!--    {{bodyModel}}-->
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="bodyModel" :rules="formRules"
             ref="bodyTypeForm" label-width="80px" label-position="right" size="small">
      <!--<el-form-item v-show="dialogProps.isAdd" label="ID" prop="id">
        <el-col :span="16"><el-input ref="code" :maxlength="32" v-model="bodyModel.id" disabled ></el-input></el-col>
      </el-form-item>-->
      <el-form-item label="姓名"  @keyup.native="queryIdCard()" prop="name" v-show="dialogProps.isAdd">
        <el-col :span="5"><el-input :maxlength="32" v-model="bodyModel.name"></el-input></el-col>
      </el-form-item>
      <el-form-item label="姓名:" prop="name" v-show="!dialogProps.isAdd">
        <el-col :span="16">{{bodyModel.name}}</el-col>
      </el-form-item>
      <!--<el-form-item  label="身份证号:" prop="idCard">
        <el-col :span="5"><el-input  v-model="bodyModel.idCard"></el-input></el-col>
      </el-form-item>-->
      <el-form-item  label="身份证号:">
        <el-col :span="5">
          <!--<el-input  v-model="bodyModel.idCard"></el-input>-->
          <el-select  v-model="bodyModel.idCard" @change="selectIdCard()">
              <el-option
              v-for="item in memberList"
              :key="item.id"
              :label="item.idcard"
              :value="item.idcard">
            </el-option>
          </el-select>
          <!--{{bodyModel}}-->
            <!--@select="handleSelect"-->
          </el-col>
      </el-form-item>
      <el-tabs type="border-card"  v-show="this.questions1 !='' ">
        <el-tab-pane>
<!--          //强迫症化  焦虑症化  恐怖症化-->
          <span slot="label"><i class="el-icon-edit"></i> 强迫症化</span>
          <el-form>
            <div class="questionDiv" v-for="(item) in questions1" :key="item.id">
              <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                <el-radio-group v-model="item.answers">
                  <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                <el-checkbox-group v-model="item.checkOptions">
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div><!--{{questions}}-->

          </el-form>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-edit"></i> 焦虑症化</span>
          <el-form>
            <div class="questionDiv" v-for="(item) in questions2" :key="item.id">
              <!--<p>{{item.question}}</p>-->
              <!--<el-radio-group v-model="isStart" v-show="item.isRadio==0" prop="question">
                <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.options" :key="value.id"></el-radio>
              </el-radio-group>-->
              <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                <el-radio-group v-model="item.answers">
                  <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                <el-checkbox-group v-model="item.checkOptions">
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div><!--{{questions}}-->

          </el-form>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-edit"></i> 恐怖症化</span>
          <el-form>
            <div class="questionDiv" v-for="(item) in questions3" :key="item.id">
              <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                <el-radio-group v-model="item.answers">
                  <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1 || item.isRadio=='1'">
               <el-checkbox-group v-model="item.checkOptions">a
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div><!--{{questions}}-->

          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div v-show="this.questions1 =='' ">
        <hr><br>
        暂无数据
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('bodyTypeForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { updateResult,addResult,saveResult, queryQPZQuestion,  queryJLQuestion,   queryKBQuestion,queryQPZQuestions,queryJLQuestions,queryKBQuestions} from '@/api/xy/result'
  import { queryIdCardByName } from '@/api/xy/assess'

  export default {
    name: 'body-edit',
    data() {
      return {
        loading: false,
        bodyModel: {},
        memberList:[],
        dialogProps: {
          visible:false,
          action: '',
          title: '',
          isAdd:null
        },
        formRules: {
        },
        questions1:[],
        questions2:[],
        questions3:[],
        questionTotal:[],
      }
    },
    methods: {
      /*selectIdCard(){
        this.$forceUpdate();
      },*/
      queryIdCard(){
          //alert(1);
            if(this.bodyModel.name=='undefined'||this.bodyModel.name==''){

            }else{
              queryIdCardByName(this.bodyModel.name).then((response)=>{

                this.memberList=response.data;

                this.bodyModel.idCard=this.memberList[0].idcard;

                //alert(this.memberList[0].idcard);
              });

            }

      },
      initAllQuestion(){
        this.questionTotal=[];

        //this.loading = true;
        queryQPZQuestions()
          .then(response => {
            this.questions1 = response.data;
            for(var i=0;i<this.questions1.length;i++){
              if(this.questions1[i].isRadio==1){
                this.$set(this.questions1[i],'checkOptions', []); //起作用
              }else{
                this.$set(this.questions1[i],'answers', Number.parseInt(this.questions1[i].answers)); //起作用

              }
            }
            this.questionTotal.push(this.questions1);
          })
          .catch(error => {
            console.log(error)
            this.loading = false;
          })

        queryJLQuestions()
        .then(response => {
          this.questions2 = response.data;
          for(var i=0;i<this.questions2.length;i++){
            if(this.questions2[i].isRadio==1){
                var answers=this.questions3[i].answers.split(",");
                var array=[];
                for(var k=0;k<answers.length;k++){
                    array.push(Number.parseInt(answers[k]));
                }
                this.$set(this.questions2[i],'checkOptions',array);
            }else{
              this.$set(this.questions2[i],'answers', Number.parseInt(this.questions2[i].answers)); //起作用

            }
          }
          this.questionTotal.push(this.questions2);
          //alert(this.questionTotal);
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        })

        queryKBQuestions()
        .then(response => {
          this.questions3 = response.data;
          for(var i=0;i<this.questions3.length;i++){
            if(this.questions3[i].isRadio==1){
                /*var answers=this.questions3[i].answers.split(",");
                var array=[];
                for(var k=0;k<answers.length;k++){
                    array.push(Number.parseInt(answers[k]));
                }*/
                this.$set(this.questions3[i],'checkOptions',[]);
              }else{
                this.$set(this.questions3[i],'answers', 0); //起作用
              }
          }
          this.questionTotal.push(this.questions3);
        })

      },
      initQuestion(){
        //this.questionTotal=[];

        //this.loading = true;
        queryQPZQuestion(this.bodyModel.tMemberId)
          .then(response => {
            this.questions1 = response.data;
            for(var i=0;i<this.questions1.length;i++){
              if(this.questions1[i].isRadio==1){
                this.$set(this.questions1[i],'checkOptions', []); //起作用
              }else{
                this.$set(this.questions1[i],'answers', Number.parseInt(this.questions1[i].answers)); //起作用

              }
            }
            this.questionTotal.push(this.questions1);
          })
          .catch(error => {
            console.log(error)
            this.loading = false;
          })

        queryJLQuestion(this.bodyModel.tMemberId)
        .then(response => {
          this.questions2 = response.data;
          for(var i=0;i<this.questions2.length;i++){
            if(this.questions2[i].isRadio==1){
                var answers=this.questions3[i].answers.split(",");
                var array=[];
                for(var k=0;k<answers.length;k++){
                    array.push(Number.parseInt(answers[k]));
                }
                this.$set(this.questions3[i],'checkOptions',array);
            }else{
              this.$set(this.questions2[i],'answers', Number.parseInt(this.questions2[i].answers)); //起作用

            }
          }
          this.questionTotal.push(this.questions2);
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        })

        queryKBQuestion(this.bodyModel.tMemberId)
        .then(response => {
          this.questions3 = response.data;
          for(var i=0;i<this.questions3.length;i++){
            if(this.questions3[i].isRadio==1){
                var answers=this.questions3[i].answers.split(",");
                var array=[];
                for(var k=0;k<answers.length;k++){
                    array.push(Number.parseInt(answers[k]));
                }
                this.$set(this.questions3[i],'checkOptions',array);
              }else{
                this.$set(this.questions3[i],'answers', Number.parseInt(this.questions3[i].answers)); //起作用
              }
          }
          this.questionTotal.push(this.questions3);
        })

        for(var j=0;j<this.questionTotal.length;j++){
              var questions=this.questionTotal[j];
              //alert(this.questionTotal[j]);
              for(var i=0;i<questions.length;i++){
                  if(questions[i].isRadio==1){
                    var answers=this.questions3[i].answers.split(",");
                    var array=[];
                    for(var k=0;k<answers.length;k++){
                        array.push(Number.parseInt(answers[k]));
                    }
                    this.$set(this.questions3[i],'checkOptions',array);
                  }else{
                    this.$set(this.questions[i],'answers', Number.parseInt(this.questions1[i].answers)); //起作用
                  }
              }
        }



      },
      submitForm() {
        /*axios.post("/Result/addResult",this.questionTotal).then(()=>{
          this.$message({
            message: '评估成功，请耐心等待结果',
            type: 'success'
          });
        })*/


        if(this.dialogProps.action =='edit'){
              this.loading = true
              updateResult(this.bodyModel.id,this.questionTotal)
                .then(response => {
                  this.$message({
                    message: '修改成功！',
                    type: 'success'
                  })
                  this.loading = false
                  this.dialogProps.visible = false
                  this.$emit('save-finished')
                })
                .catch(error => {
                  alert(error);
                  this.outputError(error)
                })
        //添加
        }else if(this.dialogProps.action =='add'){
          //alert(this.questionTotal);
            //this.loading = true
              addResult(this.bodyModel.idCard,this.questionTotal)
                .then(response => {
                  this.$message({
                    message: '添加成功！',
                    type: 'success'
                  })
                  this.loading = false
                  this.dialogProps.visible = false
                  this.$emit('save-finished')
                })
                .catch(error => {
                  alert(error);
                  this.outputError(error)
                })
        }
      },
      doUpdateRole() {
        this.loading = true
        updateResult(this.bodyModel.id, this.bodyModel)
          .then(response => {
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      doSaveRole() {
        this.loading = true
        saveResult(this.bodyModel)
          .then(response => {
            this.loading = false
            this.dialogProps.visible = false
            //刷新
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      handleDialogClose() {
        this.dialogProps.visible = false;
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['bodyTypeForm'].clearValidate()
          this.$refs['code'].focus()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    mounted: function() {

      this.$nextTick(() => {
        this.$on('openEditResultDialog', function(body) {
          this.bodyModel = body
          this.questionTotal=[];
          //this.$set(this.bodyModel,'idCard',Number.parseInt(this.bodyModel.idCard))
          this.dialogProps.action = 'edit'
          this.dialogProps.isAdd=false
          this.dialogProps.title = '修改体制测评结果'
          this.dialogProps.visible = true
          this.queryIdCard();

          //this.initQuestion();
        })
        this.$on('openAddResultDialog', function() {
          //alert('msg');
          //Object.assign(this.$data)
          this.bodyModel={};
          //this.questionTotal=[];

          this.initAllQuestion();


          /*for(var j=0;j<this.questionTotal.length;j++){
              var questions=this.questionTotal[j];
              //alert(this.questionTotal[j]);
              for(var i=0;i<questions.length;i++){
                  if(questions[i].isRadio==1){
                    this.$set(questions[i],'checkOptions', []); //起作用
                  }else{
                    this.$set(questions[i],'answers', questions[i].tAssessQuestionOptionList[0].id); //起作用
                  }
              }
          }*/
          this.dialogProps.action = 'add'
          this.dialogProps.isAdd=true
          this.dialogProps.title = '新增体制测评'
          this.dialogProps.visible = true
        })
        this.$on("openReadResultDialog",function (body) {
          this.bodyModel = body;
          this.dialogProps.action = 'edit'
          this.dialogProps.isAdd=false
          this.dialogProps.title = '查看详情'
          this.dialogProps.visible = true
        })
      })
    },
    created() {
    },
    watch:{
      bodyModel(newValue, oldValue){
          this.initQuestion();
      }
    }
  }
</script>

